<div class="devui-month-view {{ cssClass }}">
  <table class="devui-table devui-month-view-table">
    <thead>
      <tr class="devui-calender-header">
        <td>
          <a
            class="devui-btn-link"
            aria-hidden="true"
            (click)="onPreYear()"
            [ngClass]="{ 'devui-year-month-disabled': !hasPreYearOption() }"
          >
            <svg
              width="10px"
              height="10px"
              viewBox="0 0 10 10"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-1.000000, -1.000000)">
                  <path
                    d="M11,1.83333333 L11,10.1666667 L7,7.38833333 L7,10.1666667 L1,6 L7,1.83333333 L7,4.61033333 L11,1.83333333 Z"
                  ></path>
                </g>
              </g>
            </svg>
          </a>
        </td>
        <td>
          <a
            *ngIf="!openChooseYear && !openChooseMonth"
            class="devui-btn-link devui-btn-left"
            aria-hidden="true"
            (click)="onPreMonth()"
            [ngClass]="{ 'devui-year-month-disabled': !hasPreMonth() }"
          >
            <svg
              width="6px"
              height="10px"
              viewBox="0 0 6 10"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-3.000000, -1.000000)">
                  <polygon
                    transform="translate(6.000000, 6.000000) rotate(-90.000000) translate(-6.000000, -6.000000) "
                    points="6 3 10.1666667 9 1.83333333 9"
                  ></polygon>
                </g>
              </g>
            </svg>
          </a>
        </td>
        <td colspan="3" class="devui-dropdown">
          <span class="devui-date-title" (click)="toggle($event, 'year')">{{ i18nText?.yearDisplay(currentYear) }}</span>
          <span class="devui-date-title" (click)="toggle($event, 'month')">{{ (i18nText?.monthsOfYear)[currentMonthIndex] }}</span>
          <ul class="devui-monthOption text-center" [style.display]="openChooseMonth ? 'block' : 'none'">
            <li
              *ngFor="let month of availableMonths"
              [ngClass]="{ active: currentMonthIndex == month.index, disabled: month.disabled || isMonthDisable(month.title) }"
              (click)="onSelectMonth(month)"
            >
              {{ month.title }}
            </li>
          </ul>
          <ul class="devui-yearOption text-center" [style.display]="openChooseYear ? 'block' : 'none'">
            <li
              *ngFor="let item of yearOptions"
              [ngClass]="{ active: currentYear == item.title, disabled: item.disabled || isYearDisable(item.title) }"
              (click)="onSelectYear(item, $event)"
            >
              {{ item.title }}
            </li>
          </ul>
        </td>
        <td>
          <a
            *ngIf="!openChooseYear && !openChooseMonth"
            class="devui-btn-link devui-btn-right"
            aria-hidden="true"
            (click)="onNextMonth()"
            [ngClass]="{ 'devui-year-month-disabled': !hasNextMonth() }"
          >
            <svg
              width="6px"
              height="9px"
              viewBox="0 0 6 9"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-3.000000, -2.000000)">
                  <polygon
                    transform="translate(6.000000, 6.166667) scale(-1, 1) rotate(-90.000000) translate(-6.000000, -6.166667) "
                    points="6 3.16666667 10.1666667 9.16666667 1.83333333 9.16666667"
                  ></polygon>
                </g>
              </g>
            </svg>
          </a>
        </td>
        <td>
          <a
            class="devui-btn-link"
            aria-hidden="true"
            (click)="onNextYear()"
            [ngClass]="{ 'devui-year-month-disabled': !hasNextYearOption() }"
          >
            <svg
              width="10px"
              height="9px"
              viewBox="0 0 10 9"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-1.000000, -2.000000)">
                  <polygon points="5 4.77777778 5 2 11 6.16666667 5 10.3333333 5 7.55555556 1 10.3333333 1 2"></polygon>
                </g>
              </g>
            </svg>
          </a>
        </td>
      </tr>
      <tr class="small text-center devui-week-header">
        <td *ngFor="let item of i18nText?.daysOfWeek">{{ item }}</td>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let week of displayWeeks">
        <td
          *ngFor="let day of week"
          class="devui-day {{ isBetweenDay(day.date) }}"
          [ngClass]="{
            'devui-out-of-month': !day.inMonth,
            'devui-in-month-day': day.inMonth,
            active: isSelectDay(day.date),
            disabled: isDisabledDay(day.date),
            'devui-in-range': isInRange(day.date),
            'devui-today': day.isToday
          }"
          (click)="onSelectDate($event, day.date)"
          (mouseover)="emitHoverDate($event, day.date)"
        >
          <div class="devui-calendar-date">{{ day.day }}</div>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="time-picker-view" *ngIf="showTime">
        <ng-container *ngIf="!customViewTemplate">
          <td colspan="4">
            <div class="devui-timepicker" *ngIf="showTime" [ngClass]="{ 'devui-timepicker-disabled': isDisabledTime() }">
              <div class="devui-time">
                <input [ngModel]="currentHour" (keydown)="fixTime($event, 'h')" [disabled]="isDisabledTime()" />
                <div class="devui-btn-nav" *ngIf="!isDisabledTime()">
                  <div class="btn-up" (click)="timeUp('h')"></div>
                  <div class="btn-down" (click)="timeDown('h')"></div>
                </div>
              </div>
              <div class="devui-time">
                <input class="devui-minutes" [ngModel]="currentMinute" (keydown)="fixTime($event, 'm')" [disabled]="isDisabledTime()" />
                <div class="devui-btn-nav" *ngIf="!isDisabledTime()">
                  <div class="btn-up" (click)="timeUp('m')"></div>
                  <div class="btn-down" (click)="timeDown('m')"></div>
                </div>
              </div>
              <div class="devui-time">
                <input class="devui-seconds" [ngModel]="currentSecond" (keydown)="fixTime($event, 's')" [disabled]="isDisabledTime()" />
                <div class="devui-btn-nav" *ngIf="!isDisabledTime()">
                  <div class="btn-up" (click)="timeUp('s')"></div>
                  <div class="btn-down" (click)="timeDown('s')"></div>
                </div>
              </div>
            </div>
          </td>
          <td colspan="3" *ngIf="isAuxiliary">
            <div class="devui-btn-wrapper">
              <d-button bsStyle="common" [disabled]="!rangeStart || !rangeEnd || disabled" (btnClick)="confirmTime()" bsSize="sm">
                {{ i18nCommonText?.btnConfirm }}
              </d-button>
            </div>
          </td>
        </ng-container>
      </tr>
    </tfoot>
  </table>
</div>
